<template>
  <div class="common_page setup">
    <div class="switch">
      <span>预览效果</span>
      <el-tooltip
        :content="value1 ? '关闭左侧预览' : '打开左侧预览'"
        placement="bottom"
        effect="light"
      >
        <el-switch v-model="value1"></el-switch>
      </el-tooltip>
    </div>
    <div class="content">
      <div class="phonebox" v-show="value1">
        <div class="innerbox">
          <iframe
            id="iframe_wrap"
            :src="url"
          ></iframe>
        </div>
        <el-row class="btn_wrap">
          <el-button @click="handleRefresh">刷新</el-button>
          <el-button type="primary" @click="handlePublish">发布活动</el-button>
          <el-button type="primary" @click="handleposters">活动海报</el-button>
        </el-row>
      </div>
      <div class="subcontent">
        <act v-if="$route.query.t === 'act'"></act>
        <page v-if="$route.query.t === 'page'"></page>
        <player v-if="$route.query.t === 'player'"></player>
        <vote v-if="$route.query.t === 'vote'"></vote>
      </div>
    </div>
    <el-dialog
      :visible.sync="postersShow"
      width="375px"
      :show-close="false"
      center
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      custom-class='postersBox'
    >
      <div class="posters_box" ref="posters">
        <div class="img_wrap" ref="img_wrap">
          <img
          v-if="current == 1"
            src="../../../assets/images/poster-banner1.bc3ef85c.png"
            alt=""
          />
          <img
          v-if="current == 2"
            src="../../../assets/images/poster-banner2.b204bfc1.png"
            alt=""
          />
          <img
          v-if="current == 3"
            src="../../../assets/images/poster-banner3.1761e5a5.png"
            alt=""
          />
        </div>
        <template v-if="current == 1 || current == 3">
          <div class="title">{{ posterDetail.title }}</div>
          <div class="detail_wrap">
            <div class="detail_l">
              <div class="time">投票开始：{{ posterDetail.beginTime }}</div>
              <div class="time">投票结束：{{ posterDetail.endTime }}</div>
            </div>
            <div class="detail_r">
              <div class="qr_box">
                <div class="qr_wrap">
                  <qr-code :size='80' :voteId="posterDetail.id"></qr-code>
                </div>
                <span>扫码参与投票</span>
              </div>
            </div>
          </div>
        </template>
        <template v-if="current == 2">
          <div class="second_wrap">
            <div class="title">{{ posterDetail.title }}</div>
            <div class="detail_wrap">
              <div class="detail_l">
                <div class="time">投票开始：{{ posterDetail.beginTime }}</div>
                <div class="time">投票结束：{{ posterDetail.endTime }}</div>
              </div>
            <div class="detail_r">
              <div class="qr_box">
                <div class="qr_wrap">
                  <qr-code :size='80' :voteId="posterDetail.id"></qr-code>
                </div>
                <span>扫码参与投票</span>
              </div>
            </div>
        </div>
          </div>
        </template>
        <div class="btn_box">
          <div class="close btn" @click="postersShow = false">关闭</div>
          <el-dropdown trigger="click">
             <div class="close btn">{{currentName}}<i class="el-icon-arrow-down el-icon--right"></div>
              <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item,index) in list" :key="index" @click.native="handleSelect(item,index+1)">{{item}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div class="save btn" @click="save">保存海报</div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="publishShow"
      width="700px"
      center
      
      custom-class='publishBox'
      :close-on-click-modal="false"
      :modal-append-to-body="false"
    >
      <div class="publish_wrap" v-if="publishShow">
        <div class="left">
          <div class="left_detail_wrap">
            <div class="p_qr_wrap">
              <span>微信扫码查看活动</span>
              <qr-code @handleQR="handleQR" :size='150' :voteId="$route.query.id"></qr-code>
            </div>
            <div class="down_text" @click="download">下载二维码</div>
          </div>
        </div>
        <div class="right">
          <div class="url-tips">本活动网址</div>
            <div class="textarea">
              <el-input
                ref="code"
                readonly
                :value="qrUrl"
              ></el-input>
              <div class="copyLink" @click="copy">复制链接</div>
            </div>
            <div class="tips">请将本网址放到公众号自定义菜单或微信文章的阅读原文处发布活动</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import act from "./components/act";
import page from "./components/page";
import player from "./components/player";
import vote from "./components/vote";
import { mapGetters } from "vuex";
import qrCode from "@/components/qrCode";
import html2canvas from "@/utils/html2canvas";

export default {
  data() {
    return {
      value1: true,
      postersShow: false,
      posterDetail: {},
      current: 1,
      currentName: "系统海报1",
      list: ["系统海报1", "系统海报2", "系统海报3"],
      publishShow: false,
      qrUrl: "",
    };
  },
  computed: {
    ...mapGetters("status", {
      url: "url",
    }),
  },
  created(){
    this.$api("vote.getqrcode", {
      id: this.$route.query.id,
    }).then((res) => {
      this.$store.commit('status/SET_H5URL',res)
    });
  },
  components: {
    act,
    page,
    player,
    vote,
    qrCode,
  },

  methods: {
    handleposters() {
      this.$api("vote.actById", {
        id: this.$route.query.id,
      }).then((res) => {
        this.posterDetail.id = res.id;
        this.posterDetail.title = res.title;
        this.posterDetail.beginTime = res.beginTime;
        this.posterDetail.endTime = res.endTime;
        this.postersShow = true;
      });
    },
    save() {
      let that = this;
      setTimeout(() => {
        var saveFile = function (data) {
          var a = document.createElement("a");
          a.download = "活动海报";
          // 设置图片地址
          a.href = data;
          a.click();
        };
        html2canvas(that.$refs.posters, {
          width: that.$refs.posters.offsetWidth,
          height: that.$refs.posters.offsetHeight,
          backgroundColor: "#ffffff",
          useCORS: true,
          scale: 2,
          allowTaint: true,
          taintTest: false,
          logging: true,
        }).then(function (canvas) {
          var context = canvas.getContext("2d");
          context.mozImageSmoothingEnabled = false;
          context.webkitImageSmoothingEnabled = false;
          context.msImageSmoothingEnabled = false;
          context.imageSmoothingEnabled = false;
          const img = canvas
            .toDataURL("image/jpeg", 2.0)
            .replace("data:image/jpeg;base64,", "");
          that.finalImageSrc = "data:image/jpeg;base64," + img;
          // console.log(that.finalImageSrc);
          saveFile(that.finalImageSrc);
        });
      }, 500);
    },
    handleSelect(item, index) {
      this.current = index;
      this.currentName = item;
    },
    //发布活动
    handlePublish() {
      this.publishShow = true;
    },
    handleQR(qrUrl) {
      this.qrUrl = qrUrl;
    },
      //复制网址
    copy() {
      let copyText = this.$refs.code;
      copyText.select(); // 选择对象
      document.execCommand("Copy");
      this.$message({
        message: "复制成功",
        type: "success",
        duration: 1000,
      });
    },
     //下载二维码
    download() {
      let oQrcode = document.querySelectorAll(".p_qr_wrap img");
      let url = oQrcode[0].src;
      let a = document.createElement("a");
      let event = new MouseEvent("click"); // 下载图名字
      a.download = '活动二维码';
      a.href = url; // 合成函数，执行下载
      a.dispatchEvent(event);
    },
    handleRefresh(){
      this.$store.commit('status/SET_URL',new Date().getTime())
    }
  },
  watch: {
    $route: function () {
      // console.log(to, "too");
    },
  },
};
</script>

<style lang="scss" scoped>
.setup {
  position: relative;
  height: 100%;
  .switch {
    position: absolute;
    right: 15px;
    top: 20px;
    z-index: 1;
    width: 170px;
    height: 30px;
    padding-left: 30px;
    span {
      margin-right: 15px;
      font-size: 14px;
      color: #999;
      line-height: 20px;
    }
  }
  .content {
    display: flex;
    height: 100%;
    .phonebox {
      flex: 0 0 370px;
      .innerbox {
        background: url("../../../assets/images/img_xiaoshouji.png") no-repeat;
        background-size: 370px 683px;
        width: 100%;
        height: 683px;
        border-radius: 10px;
        // background-color: #e2e2e2;
        overflow: hidden;
        #iframe_wrap {
          width: 100%;
          height: 100%;
          padding: 50px 26px 70px;
          // overflow-y: auto;
          // height: 100%;
          // // text-align: center;
          // -ms-overflow-style: none;
          // /* IE 10+ */
          // scrollbar-width: none;
          // /* Firefox */
          // &::-webkit-scrollbar {
          //   display: none;
          //   /* Chrome Safari */
          // }
        }
      }
      .btn_wrap {
        text-align: center;
        margin-top: 10px;
        ::v-deep.el-button{
          font-size: 18px;
        }
      }
    }
    .subcontent {
      flex: 1;
      margin-left: 15px;
      height: 100%;
    }
  }
  .posters_box {
    position: relative;
    .btn_box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      width: 100%;
      bottom: -45px;
      left: 0;
      .btn {
        width: 115px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 4px;
        cursor: pointer;
      }
      .close {
        background-color: #fff;
      }
      .save {
        background-color: $themeColor;
        color: #fff;
      }
    }
    .img_wrap {
      width: 100%;
      img {
        width: 100%;
        height: auto;
      }
    }
    .title {
      margin: 10px;
    }
    .detail_wrap {
      display: flex;
      align-items: center;
      padding: 10px;

      .detail_l {
        .time {
          padding-bottom: 15px;
        }
      }
      .detail_r {
        margin-left: 30px;
        .qr_box {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          span {
            font-size: 12px;
            color: #606266;
            margin-top: 8px;
          }
        }
      }
    }
    .second_wrap {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 20px 10px 10px;
      .title {
        margin: 10px;
        color: #fff;
      }
      .detail_l {
        .time {
          padding-bottom: 15px;
          color: #fff;
        }
      }
      .detail_r {
        margin-left: 30px;
        .qr_box {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          .qr_wrap {
            padding: 5px;
            background-color: #fff;
          }

          span {
            font-size: 12px;
            color: #fff;
            margin-top: 8px;
          }
        }
      }
    }
  }
  ::v-deep.postersBox {
    .el-dialog__header {
      display: none;
    }
    .el-dialog__body {
      padding: 0;
    }
  }
   ::v-deep.publishBox {
     .el-dialog__header {
      padding: 0;
    }
    .el-dialog__body {
      padding: 0;
    }
  }

  .publish_wrap {
    height: 290px;
    display: flex;
    .left {
      width: 224px;
      height: 100%;
      background-color: #e0ecf8;
      padding: 20px;
      .left_detail_wrap {
        background-image: url("../../../assets/images/p_bglink.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 100%;
        .p_qr_wrap {
          text-align: center;
          span {
            font-size: 12px;
            display: inline-block;
            padding: 15px 0;
          }
        }
        .down_text {
          text-align: center;
          color: #3398ff;
          margin-top: 10px;
          cursor: pointer;
        }
      }
    }
    .right {
      flex: 1;
      padding: 20px;
      .url-tips {
        margin: 30px 0;
        font-size: 14px;
      }
      .textarea {
        display: flex;
        .copyLink {
          width: 86px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          color: #fff;
          background-color: $themeColor;
          cursor: pointer;
        }
      }
      .tips{
        font-size: 13px;
        margin-top: 10px;
      }
    }
  }
}
</style>